<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 24px;
            color: #1f2937;
            margin-bottom: 8px;
        }

        .header p {
            color: #6b7280;
            font-size: 14px;
        }

        .stats-bar {
            background: white;
            padding: 20px 30px;
            display: flex;
            gap: 40px;
            border-bottom: 1px solid #e5e7eb;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .stat-icon.total { background: #6366f1; }
        .stat-icon.active { background: #10b981; }
        .stat-icon.completed { background: #3b82f6; }
        .stat-icon.pending { background: #f59e0b; }

        .stat-info h3 {
            font-size: 20px;
            color: #1f2937;
        }

        .stat-info p {
            font-size: 12px;
            color: #6b7280;
        }

        .controls {
            background: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e5e7eb;
        }

        .filters {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .filter-btn {
            padding: 8px 16px;
            border: 1px solid #d1d5db;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .filter-btn:hover {
            background: #f9fafb;
        }

        .filter-btn.active {
            background: #6366f1;
            color: white;
            border-color: #6366f1;
        }

        .search-box {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .search-input {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            width: 250px;
        }

        .main-content {
            padding: 30px;
        }

        .project-table {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .table-header {
            background: #f9fafb;
            padding: 16px 24px;
            border-bottom: 1px solid #e5e7eb;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr 120px;
            gap: 20px;
            font-weight: 600;
            font-size: 14px;
            color: #374151;
        }

        .project-row {
            padding: 20px 24px;
            border-bottom: 1px solid #f3f4f6;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr 120px;
            gap: 20px;
            align-items: center;
            transition: background 0.2s;
        }

        .project-row:hover {
            background: #f9fafb;
        }

        .project-row:last-child {
            border-bottom: none;
        }

        .project-info h4 {
            font-size: 16px;
            color: #1f2937;
            margin-bottom: 4px;
        }

        .project-info p {
            font-size: 13px;
            color: #6b7280;
        }

        .project-code {
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 12px;
            color: #6b7280;
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
        }

        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
        }

        .status-badge.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-badge.active {
            background: #d1fae5;
            color: #065f46;
        }

        .status-badge.completed {
            background: #dbeafe;
            color: #1e40af;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #6366f1;
            transition: width 0.3s;
        }

        .progress-text {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        .date-info {
            font-size: 13px;
            color: #6b7280;
        }

        .actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            padding: 6px 12px;
            border: 1px solid #d1d5db;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: #f9fafb;
        }

        .action-btn.primary {
            background: #6366f1;
            color: white;
            border-color: #6366f1;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6b7280;
        }

        .empty-state h3 {
            margin-bottom: 8px;
            color: #374151;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>项目管理</h1>
        <p>外贸项目管理系统 - 统一管理所有项目进度</p>
    </div>

    <div class="stats-bar">
        <div class="stat-item">
            <div class="stat-icon total">24</div>
            <div class="stat-info">
                <h3>总项目</h3>
                <p>全部项目</p>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon active">12</div>
            <div class="stat-info">
                <h3>进行中</h3>
                <p>正在执行</p>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon completed">8</div>
            <div class="stat-info">
                <h3>已完成</h3>
                <p>项目完结</p>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon pending">4</div>
            <div class="stat-info">
                <h3>待开始</h3>
                <p>准备阶段</p>
            </div>
        </div>
    </div>

    <div class="controls">
        <div class="filters">
            <span style="font-size: 14px; color: #6b7280; margin-right: 8px;">筛选:</span>
            <button class="filter-btn active" data-status="all">全部项目</button>
            <button class="filter-btn" data-status="pending">待开始</button>
            <button class="filter-btn" data-status="active">进行中</button>
            <button class="filter-btn" data-status="completed">已完成</button>
        </div>
        <div class="search-box">
            <input type="text" class="search-input" placeholder="搜索项目名称或编号..." id="searchInput">
            <button class="filter-btn">搜索</button>
        </div>
    </div>

    <div class="main-content">
        <div class="project-table">
            <div class="table-header">
                <div>项目信息</div>
                <div>负责人</div>
                <div>状态</div>
                <div>进度</div>
                <div>时间</div>
                <div>操作</div>
            </div>
            
            <div class="project-list" id="projectList">
                <!-- 项目数据将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟项目数据
        const projects = [
            {
                id: 1,
                name: 'SEO-ABC-2024-01',
                description: 'abc-tech.com SEO优化项目',
                code: 'SEO-ABC-2024-01',
                manager: '张经理',
                status: 'pending',
                progress: 0,
                startDate: '2024-01-20',
                endDate: '2024-12-20',
                budget: '8000元'
            },
            {
                id: 2,
                name: 'SEO-DEF-2023-12',
                description: 'def-finance.com 网站优化',
                code: 'SEO-DEF-2023-12',
                manager: '王经理',
                status: 'active',
                progress: 65,
                startDate: '2023-12-01',
                endDate: '2024-12-01',
                budget: '12000元'
            },
            {
                id: 3,
                name: 'SEO-JKL-2023-08',
                description: 'jkl-corp.com 搜索引擎优化',
                code: 'SEO-JKL-2023-08',
                manager: '李经理',
                status: 'completed',
                progress: 100,
                startDate: '2023-12-28',
                endDate: '2024-06-28',
                budget: '6500元'
            },
            {
                id: 4,
                name: 'SEO-XYZ-2024-01',
                description: 'xyz-mall.com 电商SEO项目',
                code: 'SEO-XYZ-2024-01',
                manager: '刘经理',
                status: 'pending',
                progress: 0,
                startDate: '2024-01-25',
                endDate: '2024-07-25',
                budget: '15000元'
            },
            {
                id: 5,
                name: 'SEO-GHI-2024-01',
                description: 'ghi-auto.com 汽车行业SEO',
                code: 'SEO-GHI-2024-01',
                manager: '陈经理',
                status: 'active',
                progress: 45,
                startDate: '2024-01-01',
                endDate: '2024-06-30',
                budget: '9800元'
            }
        ];

        const statusMap = {
            'pending': { text: '待开始', class: 'pending' },
            'active': { text: '进行中', class: 'active' },
            'completed': { text: '已完成', class: 'completed' }
        };

        function renderProjects(filteredProjects = projects) {
            const projectList = document.getElementById('projectList');
            
            if (filteredProjects.length === 0) {
                projectList.innerHTML = `
                    <div class="empty-state">
                        <h3>暂无项目</h3>
                        <p>没有找到符合条件的项目</p>
                    </div>
                `;
                return;
            }

            projectList.innerHTML = filteredProjects.map(project => `
                <div class="project-row" data-status="${project.status}">
                    <div class="project-info">
                        <h4>${project.name}</h4>
                        <p>${project.description}</p>
                        <span class="project-code">${project.code}</span>
                    </div>
                    <div>${project.manager}</div>
                    <div>
                        // <span class="status-badge ${statusMap[project.status].class}">
                        //     ${statusMap[project.status].text}
                        // </span>
                    </div>
                    <div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${project.progress}%"></div>
                        </div>
                        <div class="progress-text">${project.progress}%</div>
                    </div>
                    <div class="date-info">
                        <div>开始: ${project.startDate}</div>
                        <div>结束: ${project.endDate}</div>
                        <div style="margin-top: 4px; font-weight: 500;">${project.budget}</div>
                    </div>
                    <div class="actions">
                        <button class="action-btn primary">查看</button>
                        <button class="action-btn">编辑</button>
                    </div>
                </div>
            `).join('');
        }

        // 筛选功能
        document.querySelectorAll('.filter-btn[data-status]').forEach(btn => {
            btn.addEventListener('click', () => {
                // 更新按钮状态
                document.querySelectorAll('.filter-btn[data-status]').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // 筛选项目
                const status = btn.dataset.status;
                const filteredProjects = status === 'all' 
                    ? projects 
                    : projects.filter(p => p.status === status);
                
                renderProjects(filteredProjects);
            });
        });

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const filteredProjects = projects.filter(p => 
                p.name.toLowerCase().includes(searchTerm) ||
                p.description.toLowerCase().includes(searchTerm) ||
                p.code.toLowerCase().includes(searchTerm)
            );
            renderProjects(filteredProjects);
        });

        // 初始化渲染
        renderProjects();
    </script>
</body>
</html>